<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
   <head>
      <title>Spitter</title>
      <link rel="stylesheet" type="text/css" th:href="@{/resources/style.css}">
      <script type="text/javascript" th:src="@{/resources/js/jquery/jquery.min.js}"></script>
      <link rel="stylesheet" th:href="@{/resources/css/bootstrap/css/bootstrap.min.css}">
      <script type="text/javascript" th:src="@{/resources/js/bootstrap/bootstrap.min.js}"></script>
      
      <!-- Custom styles for this template -->
      <link th:href="@{/resources/css/signin.css}" rel="stylesheet">
   </head>
   <body onload="document.f.username.focus();">
	<!-- <div id="header" th:include="page :: header"></div> -->
	<div class="container">
		<h1>Login with username and password</h1>
		<form name='f' th:action="@{/spitter/login}" th:method="post" th:object="${loginUser}" >
			<div class="errors" th:if="${#fields.hasErrors('*')}">
				<ul>
					<li th:each="err : ${#fields.hasErrors('*')}" th:text="${err}">Input is incorrect</li>
				</ul>
			</div>

			<label th:class="${#fields.hasErrors('username')}?'error'">Username:</label>
			<input type="text" th:field="*{username}" th:class="${#fields.hasErrors('username')}?'error'" /><br /> 
			<label th:class="${#fields.hasErrors('password')}?'error'">Password:</label>
			<input type="password" th:field="*{password}" th:class="${#fields.hasErrors('password')}?'error'" /><br />
			<input type="submit" value="Login">
	        <!-- <input id="remember_me" th:field="*{remember-me}" type="checkbox" />
	        <label for="remember_me" th:class="inline" >Remember me</label> -->
		</form>
	</div>
</body>
</html>